import React from "react";
import "../../css/cenav.less";

export default class Cenav extends React.Component{
    constructor(props){
        super(props);
       
        this.state={
            imgnews:[],
            type:props.data,
            count:props.count,
            flag:false
            
        }
    }
componentDidMount(){
    let result=fetch("http://www.wwtliu.com/sxtstu/news/juhenews.php?type="+this.state.type+"&count="+this.state.count,{
        method:"get"
    }).then(rel=>{
        return rel.json();
    }).then(json=>{
        this.setState({
            imgnews:json
        })
       
    })
}
handlclick(){
    this.setState({
        flag:true
    })
}
handlclick1(){
   this.setState({
       flag:false
   })
}
    render(){
        let move=this.state.flag?{top:"-836px"}:{top:"0px"}
        return(
            <div className={this.state.flag?`cenav bbb`:`cenav aaa`}>
                   <div style={move}  >
                        {this.state.imgnews.map((item,index)=>{
                            return (
                                <p key={index}>
                                    <img key={index} src={item.thumbnail_pic_s}/>
                                </p>
                            )
                        })}
                   </div>
                    <a href="javascript:;" className="top btn" onClick={this.handlclick1.bind(this)} >
                        上
                    </a>
                    <a href="javascript:;" className="bottom btn" onClick={this.handlclick.bind(this)}>
                        下
                    </a>
            </div>
        )
    }
}